<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="案件管理"/> -->
        <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="案件名称">
                        <el-input v-model="queryParams.name" 
                        clearable 
                        @clear="getCaseLists" 
                        @keyup.enter.prevent="getCaseLists"
                        style="width: 250px;"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="案件编号">
                        <el-input v-model="queryParams.casecode" clearable @clear="getCaseLists" style="width: 250px;"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="案件类别">
                        <el-select v-model="queryParams.casetype" style="width: 250px;" @change="getCaseLists" clearable>
                            <el-option
                                v-for="item in nj_anjian_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" @click="getCaseLists">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-divider class="mt-0"/>

        <el-row class="mb-3">
            <el-col :span="24">
                <el-space>
                    <el-button
                        plain
                        type="primary"
                        @click="AddEditCaseRef.showAddEditCase()"
                    >
                        <el-icon class="me-2">
                            <Plus/>
                        </el-icon>
                        新增
                    </el-button>
                </el-space>
            </el-col>
        </el-row>
        <el-table
            ref="CaseTableRef"
            v-loading="loading"
            :data="CaseTables"
            show-overflow-tooltip
            @sort-change="handleSortChange"
            stripe
            :row-style="tableRowStyle"
            :default-sort="defaultSort"
        >
            <el-table-column label="案件名称" prop="name"/>
            <el-table-column label="案件类别" prop="casetype"/>
            <!-- <el-table-column label="添加时间" prop="adddate" width="160" sortable="adddate" :sort-orders="sortOrders" /> -->
            <el-table-column label="添加时间" prop="adddate" width="160" sortable="adddate" :sort-orders="sortOrders">
                <template #default="scope">
                <span>{{ parseTime(scope.row.adddate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="办案单位" prop="unitname"/>
            <el-table-column label="办案部门" prop="depname"/>
            <el-table-column label="承办人" prop="userName"/>
            <el-table-column label="状态" prop="state" width="80">
                <template #default="scope">
                    <dict-tag :options="nj_anjian_status" :value="scope.row.state"/>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
                <template #default="scope">
                    <el-button
                        link size="small"
                        type="warning"
                        @click="EditCaseByinquestRef.showCaseByinquest(scope.row)"
                        >
                        <el-icon class="me-1">
                            <UserFilled />
                        </el-icon>
                        涉案人管理
                    </el-button>
                    <el-button
                        link size="small"
                        type="primary"
                        @click="AddEditCaseRef.showEditCase(scope.row)"
                        >
                        <el-icon class="me-1">
                            <Edit/>
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button
                        link size="small"
                        type="danger"
                        @click="deleteCase(scope.row)">
                        <el-icon class="me-1">
                            <Delete/>
                        </el-icon>
                        删除
                    </el-button>    
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="paging.pageNum"
            v-model:limit="paging.pageSize"
            @pagination="getCaseLists"
        />
        <AddEditCase ref="AddEditCaseRef" @getCaseList="getCaseLists" />
        <CaseByinquest ref="EditCaseByinquestRef" @getCaseList="getCaseLists"/> 
    </div>
</template>

<script setup>
import {ElMessageBox} from 'element-plus'
import PageHeader from "@/components/PageHeader/index.vue";
import CaseByinquest from "@/components/Case_Byinquest/index.vue";
import AddEditCase from "./AddEditCase/AddEditCase.vue";
import {getCurrentInstance} from "vue";


import {getCaseInfoList,getCaseInfoInfo,  deleteCaseInfo} from "@/api/CaseInfo/CaseInfo";
import {getCaseBirefList} from "@/api/casebiref";
import PageEnum from "@/enum/PageEnum.js";

const {proxy} = getCurrentInstance();
const {nj_anjian_type,nj_anjian_status} = proxy.useDict('nj_anjian_type', 'nj_anjian_status')


const queryParamsRef = ref()
const deleteStatus = ref(true)
const EditCaseByinquestRef = ref({})
const AddEditCaseRef = ref({})
const loading = ref(false)

const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE,
    isAsc: 'descending',
    orderByColumn: 'adddate'
})
const queryParams = ref({
    name: '',
    casecode: '',
    brief: '',
    state:'1,2'
})

const defaultSort = ref({prop: 'adddate', order: 'descending'});
const sortOrders = reactive(['descending', 'ascending'])

const total = ref(0)
const CaseTables = ref([])

onMounted(() => {
    getCaseLists()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取案件列表
const getCaseLists = async () => {
    loading.value = true
    await getCaseInfoList(queryParams.value, paging.value).then(res => {
        CaseTables.value = res.rows
        total.value = res.total
        loading.value = false
    })
}
const CaseTableRef = ref()

/** 排序触发事件 */
const handleSortChange = (column, prop, order) => {
    queryParams.value.orderByColumn = column.prop;
    queryParams.value.isAsc = column.order;
    getTableDataLists();
}
const deleteCase = async (row) => {
    ElMessageBox.confirm('确定删除此案件？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteCaseInfo(row.caseCaseinfoId).then(res => {
        getCaseLists()
    })
  }).catch(() => {
  });
}

// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {
        name: '',
        casecode: '',
        brief: '',
        state:'1,2'
    }
    getCaseLists()
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>